<template>
  <div>
    <!-- show-checkbox 是否显示复选框 -->
    <!-- default-expand-all 默认展开所有节点-->
    <!-- check-strictly 父子节点不进行联立-->
    <!-- setCheckedKeys 方法用于数据回填 -->
    <!-- setCheckedKeys 方法用于获取选择的子节点数据(数组) -->
    <el-tree ref="tree" node-key="id" :data="list" :props="{label:'name'}" :show-checkbox="true" :default-expand-all="true" :check-strictly="true" />
    <el-button size="small" @click="hDel">取消</el-button>
    <el-button size="small" type="primary" @click="SubFn">确定</el-button>
  </div>
</template>

<script>
// 引入统一的请求文件
import { getPermissionListApi, getRoleDetailApi, assignPermApi } from '@/api'
// 引入转换树状数组的处理函数
import { treeFn } from '@/utils/tree'
export default {
  props: {
    roleId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: [] // 保存请求回来的权限列表
    }
  },
  created() {
    this.getPermissionList()
    this.getRoleDetail()
  },
  methods: {
    async getPermissionList() { // 获取权限列表请求函数
      try {
        const res = await getPermissionListApi()
        this.list = treeFn(res.data)
      } catch (err) {
        console.dir(err)
      }
    },
    async getRoleDetail() { // 根据id获取角色详情请求函数
      try {
        const res = await getRoleDetailApi(this.roleId)
        // 数据回填
        this.$refs.tree.setCheckedKeys(res.data.permIds)
      } catch (err) {
        console.dir(err)
      }
    },
    async assignPerm() { // 更新角色详情请求函数
      try {
        const permIds = this.$refs.tree.getCheckedKeys() // 获取当前树状组件选中的节点值(数组形式)
        await assignPermApi({ id: this.roleId, permIds })
        this.$message({ // 给用户一个提示
          type: 'success',
          message: '添加员工成功!'
        })
      } catch (err) {
        console.dir(err)
        this.$message({ // 给用户一个提示
          type: 'danger',
          message: '添加员工失败!'
        })
      }
    },
    hDel() { // 点击取消关闭弹层
      this.$emit('input') // 关闭弹层
    },
    SubFn() { // 点击确认触发的事件
      this.assignPerm() // 发起权限更新请求
      this.$emit('input') // 关闭弹层
    }

  }
}
</script>

<style>

</style>
